<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>zuo-deploy</title>
  <!-- 导入样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入 Vue 3 -->
  <script src="//unpkg.com/vue@next"></script>
  <!-- 导入组件库 -->
  <script src="//unpkg.com/element-plus"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
  <style>
    .login-area {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      padding: 10px;
    }

    .text-log-wrap {
      font-size: 14px;
      background: rgba(0, 0, 0, 0.8);
      color: rgb(255, 255, 255);
      border-radius: 5px;
      padding: 20px;
      margin-bottom: 100px;
    }

    .text-log-wrap pre {
      padding: 0;
      margin: 0;
    }

    .text-log p {
      margin: 5px 0;
    }
  </style>
</head>

<body>
  <div id="app" style="margin:0 20px;">
    <div class="login-area">
      <div v-if="!isLogin">
        <el-input v-model="password" type="password" style="width: 200px;"></el-input>
        &nbsp;
        <el-button type="primary" @click="login">登录</el-button>
      </div>
      <div v-else>已登录</div>
    </div>

    <div>
      <el-button type="primary" @click="deploy">部署</el-button>
      <div>
        <p>部署日志:</p>
        <div class="text-log-wrap">
          <pre v-if="msgList.length" class="text-log">
            <p v-for="(text, index) in msgList" :key="text+index">{{text}}</p>
          </pre>
          <div v-else>请点击部署</div>
        </div>
      </div>

    </div>
  </div>
  <script>
    const app = {
      data() {
        return {
          counter: 0,
          deployLog: '点击按钮进行部署',
          msgList: [],
          password: '',
          isLogin: false
        }
      },
      mounted() {
        this.socket = io() // 链接到 socket 服务器
        this.socket.on('deploy-log', (msg) => {
          this.msgList.push(msg)
        })
        axios.get('/isLogin')
          .then((response) => {
            console.log(response.data);
            let { code, msg, data } = response.data
            if (data) {
              this.isLogin = true
            }
          }).catch(function (error) {
            console.log(error);
          })
      },
      methods: {
        login() {
          if (!this.password) {
            this.$message.warning('请输入密码')
            return
          }
          axios.post('/login', { password: this.password })
            .then((response) => {
              console.log(response.data);
              let { code, msg } = response.data
              if (code === 0) {
                this.isLogin = true
              } else {
                this.$message.error(msg)
              }
            })
            .catch(function (err) {
              console.log(err);
              this.$message.error(err.message)
            })
        },
        deploy() {
          this.msgList = []
          this.deployLog = '后端部署中，请稍等...'
          axios.post('/deploy')
            .then((response) => {
              // handle success
              console.log(response.data);
              let { code, msg } = response.data
              if (code !== 0) {
                this.$message.error(msg)
              }
              console.log(msg)
            })
            .catch(function (err) {
              console.log(err);
              this.$message.error(err.message)
            })
        }
      }
    }

    Vue.createApp(app).use(ElementPlus).mount('#app')
  </script>
</body>

</html>